<template>
	<view class=" container">
		<view class="bg bg-color-base "></view>

		<view class="tab vs-row vs-align-center">
			<image class="tab-bg" src="https://z3.ax1x.com/2021/07/20/WNkgpD.png" mode=""></image>
			<view class="vs-row vs-align-center">
				<view class="vs-column vs-align-center margin-r40">
					<text class="font-32 margin-b20">Welcome to Lingmai Warehouse & Distribution</text>
					<view class="line bg-color-base" ></view>
				</view>
			</view>
		</view>

		<view class="login margin-b50 bb">
			<view class="input vs-row vs-align-center margin-b40">
				<input class="uni-input vs-flex-item  font-30" v-model="phone" focus placeholder="Please enter the account" />
			</view>
			<view class="input vs-row vs-align-center margin-b40">
				<input class="uni-input vs-flex-item  font-30" password v-model="password" focus placeholder="Please enter the password" />
			</view>
		</view>

		<view class="button bg-color-base vs-row vs-align-center vs-space-center margin-b20" @click="goLogin">
			<text class="color-white font-34">Log in now</text>
		</view>

		<!-- <view class="button2 bg-color-base2 vs-row vs-align-center vs-space-center margin-b20" @click="goRegister" v-if="show">
			<text class="color-black font-34">注册账号</text>
		</view> -->

		<view class="wrap" style="position: fixed;bottom: 5rpx;width: 100%;z-index: 999;">
			<u-row>
				<u-col span="12" text-align="center">
					<view class="u-line-1 u-m-t-10 baise">
						@Shandong Lingmai Technology Co., Ltd
					</view>
				</u-col>
			</u-row>
			<u-row>
			</u-row>
		</view>

		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone:"",
				password:"",
				//smsCode: "",
				show:true,
			}
		},
		onLoad() {
			uni.hideTabBar();
		},
		methods: {
			//注册
			goRegister(){
				this.$Router.push({
					name: 'register'
				})
			},
			//登录
			goLogin(){
				if(typeof this.phone =='undefined'|| this.phone == null || this.phone == ''){
					this.$refs.uToast.show({
						title: 'Please enter the account',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error',
						// 如果不需要图标，请设置为false
						// icon: false
						position:'bottom'
					})
					return false;
				}
				if(typeof this.password =='undefined'|| this.password == null || this.password == ''){
					this.$refs.uToast.show({
						title: 'Please enter the password',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error',
						// 如果不需要图标，请设置为false
						// icon: false
						position:'bottom'
					})
					return false;
				}
				uni.showLoading({
					title: 'Submitting'
				})
				this.$http.post('/rest/login',{
				},{
					params: {
						username: this.phone,
						password: this.password,
					},
					//anth 是否验证，非必填， false: 不需要验证 true: 需要验证,默认为true需要验证.
					custom: {auth: false},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					}
				}).then(res => {
					uni.hideLoading()
					let data = res.data.data
					if(res.data.code != 200) {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'error'
						})
					} else {
						try {
						    uni.setStorageSync('token', data);
							this.$refs.uToast.show({
								title: 'Login successful',
								type: 'success'
							})
							setTimeout(() => {
								this.$Router.pushTab({
									name: 'index',
								})
							}, 500)
						} catch (e) {
						    this.$refs.uToast.show({
						    	title: 'Login failed:'+e,
						    	// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						    	type: 'error',
						    	// 如果不需要图标，请设置为false
						    	// icon: false
						    	position:'bottom'
						    })
						}
					}
				}).catch(err => {
					let message = err.data.message;
					this.$refs.uToast.show({
						title: message,
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'error',
						// 如果不需要图标，请设置为false
						// icon: false
						position:'bottom'
					})
				});
			},
		}
	}
</script>
<style lang="scss">
	body.pages-login-login {
		background-color: #ededed;
	}
	.container {
		position: relative;
	}

	.bg {
		position: relative;
		width: 750rpx;
		height: 450rpx;
	}

	.tab {
		position: absolute;
		top: 320rpx;
		left: 20rpx;
		right: 20rpx;
		height: 150rpx;
		padding: 0 50rpx;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		&-bg {
			position: absolute;
			top: -200rpx;
			right: -50rpx;
			width: 440rpx;
			height: 285rpx;
		}
	}

	.line {
		width: 25rpx;
		height: 7rpx;
	}

	.login, .register {

		padding: 0 60rpx;
	}

	.input {
		width: 630rpx;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: rgba(199, 199, 199, 0.1);
		border-radius: 10rpx;
		&-icon {
			width: 30rpx;
			height: 38rpx;
		}


	}
	.bb{
		background-color: #FFFFFF;
		position: absolute;
		left: 20rpx;
		right: 20rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

	}

	.button {
		position: absolute;
		top:730rpx;
		width: 630rpx;
		height: 90rpx;
		margin-left: 60rpx;
		border-radius: 10rpx;
	}

	.button2 {
		position: absolute;
		top:840rpx;
		width: 630rpx;
		height: 90rpx;
		margin-left: 60rpx;
		border-radius: 10rpx;
	}

	.separator {
		height: 2rpx;
		margin: 0 30rpx;
		background-color: #f5f5f5;
	}

	.other {
		&-items {
			padding: 0 200rpx;
		}

		&-icon {
			width: 50rpx;
			height: 50rpx;
		}
	}

	/****↓登录页面*****/
	// 下边距
	.margin-b5 { margin-bottom: 5rpx; }
	.margin-b10 { margin-bottom: 10rpx; }
	.margin-b15 { margin-bottom: 15rpx; }
	.margin-b20 { margin-bottom: 20rpx; }
	.margin-b25 { margin-bottom: 25rpx; }
	.margin-b30 { margin-bottom: 30rpx; }
	.margin-b40 { margin-bottom: 40rpx; }
	.margin-b60 { margin-bottom: 60rpx; }
	.margin-b80 { margin-bottom: 80rpx; }
	.margin-b100 { margin-bottom: 100rpx; }

	// 右边距
	.margin-r5 { margin-right: 5rpx; }
	.margin-r10 { margin-right: 10rpx; }
	.margin-r15 { margin-right: 15rpx; }
	.margin-r20 { margin-right: 20rpx; }
	.margin-r25 { margin-right: 25rpx; }
	.margin-r30 { margin-right: 30rpx; }
	.margin-r40 { margin-right: 40rpx; }
	.margin-r60 { margin-right: 60rpx; }

	// 字体大小
	.font-18 {
		font-style: normal;
		font-size: 18rpx;
		font-family: Droid Sans Fallback;
	}
	.font-20 {
		font-style: normal;
		font-size: 20rpx;
		font-family: Droid Sans Fallback;
	}
	.font-22 {
		font-style: normal;
		font-size: 22rpx;
		font-family: Droid Sans Fallback;
	}
	.font-24 {
		font-style: normal;
		font-size: 24rpx;
		font-family: Droid Sans Fallback;
	}
	.font-26 {
		font-style: normal;
		font-size: 26rpx;
		font-family: Droid Sans Fallback;
	}
	.font-28 {
		font-style: normal;
		font-size: 28rpx;
		font-family: Droid Sans Fallback;
	}
	.font-30 {
		font-style: normal;
		font-size: 30rpx;
		font-family: Droid Sans Fallback;
	}
	.font-32 {
		font-style: normal;
		font-size: 32rpx;
		font-family: Droid Sans Fallback;
	}
	.font-34 {
		font-style: normal;
		font-size: 34rpx;
		font-family: Droid Sans Fallback;
	}
	.font-36 {
		font-style: normal;
		font-size: 36rpx;
		font-family: Droid Sans Fallback;
	}
	.font-38 {
		font-style: normal;
		font-size: 38rpx;
		font-family: Droid Sans Fallback;
	}
	.font-40 {
		font-style: normal;
		font-size: 40rpx;
		font-family: Droid Sans Fallback;
	}
	.font-46 {
		font-style: normal;
		font-size: 46rpx;
		font-family: Droid Sans Fallback;
	}
	.font-50 {
		font-style: normal;
		font-size: 50rpx;
		font-family: Droid Sans Fallback;
	}
	.font-60 {
		font-style: normal;
		font-size: 60rpx;
		font-family: Droid Sans Fallback;
	}
	.font-80 {
		font-style: normal;
		font-size: 80rpx;
		font-family: Droid Sans Fallback;
	}

	// 字体对齐
	.text-left { text-align: left; }
	.text-center { text-align: center; }
	.text-right { text-align: right; }

	// color相关
	.color-white { color: #FFFFFF; }
	.color-red { color: #dc0000; }

	// 黑色色阶向下
	.color-black { color: #000; }
	.color-black-3 { color: #333; }
	.color-black-6 { color: #666; }
	.color-black-9 { color: #999; }

	// 字体宽度
	.font-weight-400 { font-weight: 400; }
	.font-weight-500 { font-weight: bold; }

	// 间隔
	.spacing-20 {
		width: 750rpx;
		height: 20rpx;
		background-color: #f8f8f8;
	}

	// 圆角
	.radius-10 { border-radius: 10rpx; }
	.radius-20 { border-radius: 20rpx; }
	.radius-30 { border-radius: 30rpx; }
	.radius-circle { border-radius: 50%; }
	.radius-height { border-radius: 10000px; }

	// flex相关
	.vs-flex-item {display: flex; flex: 1; }
	.vs-space-between {display: flex; justify-content: space-between; }
	.vs-space-around {display: flex; justify-content: space-around; }
	.vs-space-center {display: flex; justify-content: center; }
	.vs-space-end {display: flex; justify-content: flex-end; }
	.vs-row {display: flex; flex-direction: row; }
	.vs-column {display: flex; flex-direction: column; }
	.vs-align-end {display: flex; align-items: flex-end; }
	.vs-align-center {display: flex; align-items: center; }
	.vs-align-start {display: flex; align-items: flex-start; }
	.vs-item-hover {display: flex; background-color: rgba(0, 0, 0, 0.05); }
	.vs-btn-hover {display: flex; opacity: 0.8; }
	.color-base { color: #19be6b; }
	.bg-color-base { background-color: #19be6b; }
	.bg-color-base2 { background-color: #f8f8f8; }


	/****↑登录页面*****/
</style>
